<template>
  <div class="record bigTableStyle">
    <div class="record-top">
      <div class="text colorh">
        <div>记录人:</div>
        <div>
          <el-select v-model="formData.DJRID" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option
              v-for="(item, index) in initTextData.jcjlr"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <div>记录时间:</div>
        <div>{{formData.DJRQ}}</div>
      </div>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="1.2rem">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="变电站:" prop="time">
                  <el-select
                    v-model="DJBZMC"
                    placeholder="请选择"
                    clearable
                    disabled
                    :style="{width: '100%'}"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in a"
                      :key="index"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <!-- <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="检测类别:" prop>
                  <el-select
                    v-model="jclb"
                    placeholder="请选择"
                    filterable
                    clearable
                    disabled
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in b"
                      :key="index"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>-->
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="检测人:" prop="source">
                  <el-select
                    multiple
                    collapse-tags
                    v-model="formData.JCRID"
                    placeholder="请选择"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in initTextData.jcjlr"
                      :key="index"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="检测时间:" prop="source">
                  <el-date-picker disabled v-model="formData.JCSJ" type="date" placeholder="选择日期" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-form-item label="检查情况:" prop="time">
            <el-input type="textarea" v-model="jcqk" />
          </el-form-item>
        </el-row>
        <el-row :gutter="15">
          <el-form-item label="备注:" prop="time">
            <el-input type="textarea" v-model="BZ" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="record-in">
      <el-table
        ref="deviceTable"
        border
        v-loading="isShowLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        :data="tableData"
        @selection-change="handleSelectionChange"
        height="100%"
        :row-class-name="tableRowClassName"
        style="width: 100%;height:100%;"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <!-- <el-table-column prop="BDZ" label="变电站单元" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="BLQMC" label="设备名称" width="280" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="DMMC" label="电压等级" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="XLDL" label="泄漏电流(mA)" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="XLDLZDZ" label="泄漏电流最大值(mA)" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="SCXLDLZ" label="上次泄漏电流值(mA)" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="ZSZ" label="指示值" show-overflow-tooltip></el-table-column>
        <el-table-column prop="BCDZCS" label="动作次数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="SCDZCS" label="上次动作次数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="LJCS" label="累计动作次数" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="DZQK" label="动作情况" show-overflow-tooltip></el-table-column>
        <el-table-column prop="SJLX" label="事件类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="BDZMC" label="表盘最大值" show-overflow-tooltip></el-table-column> -->
      </el-table>
    </div>
    <!-- <div class="paged elPaginationStyle">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.rows"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages.totalSize"
        ></el-pagination>
    </div>-->
    <div class="record-bottom">
      <div class="scrz">
        <el-checkbox v-model="f">生成日志</el-checkbox>
      </div>
      <el-button type="primary" @click="query" class="centerbox">推送</el-button>
      <el-button type="primary" @click="Close" class="centerbox">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { log } from "three";
import filter from "@/utils/filter";

@Component({})
export default class extends Vue {
  @Prop() value!: any;
  formData: any = {
    BDZID: "",
    DJRID: "",
    DJRQ: "",
    DJBZID: "",
    JCRID: "",
    JCSJ: "",
  };
  // jclb = "";
  jcqk = "";
  BZ = "";
  DJBZMC = "";
  f = true;
  a = [];
  b = [];
  isShowLoading = false;
  tableData = [];
  rules = {};
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //分页数据事件相关
  pages = {
    rows: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.rows = val;
    // this.init();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.$emit("setPageIndex", val);
    this.pages.page = val;
    // this.init();
  }
  // 勾选的消息
  tableSelect = [];
  // 表格选择事件
  handleSelectionChange(val: any): void {
    console.log(val);
    this.tableSelect = val;
  }
  initTextData: any = {};
  initText() {
    var from: any = {};
    from.bdzId = this.$route.query.code || "";

    from.jgId = this.value || "";
    (this as any).$services
      .getBlqTop({ data: from })
      .then((result: any) => {
        console.log(result);
        if (result.code == 200) {
          this.initTextData = result.data;
          this.formData.BDZID = result.data.bdzId;
          this.DJBZMC = result.data.bdzMc;
          this.formData.DJRQ = result.data.jcsj;
          this.formData.JCSJ = result.data.jlsj;
          // this.jclb = result.data.jclx;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
    (this as any).$services
      .getblqCenter({ data: from })
      .then((result: any) => {
        if (result.code == 200) {
          this.tableData = result.data;
          this.$nextTick(() => {
            for (let i = 0; i < this.tableData.length; i++) {
              (this.$refs as any).deviceTable.toggleRowSelection(
                this.tableData[i],
                true
              );
            }
          });
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  toggleRowSelevtion(rows) {
    if (rows) {
      rows.forEach((row) => {
        (this as any).$refs.deviceTable.toggleRowSelevtion(row);
      });
    }
  }
  query() {
    if (this.formData.DJRID == "" || this.formData.JCRID == "") {
      this.$message({
        type: "warning",
        message: `'记录人''检测人'不能为空`,
      });
      return;
    }
    var from: any = {
      topMsg: {},
      bdzId: "",
      rows: "",
      scrz: "",
      jgId: "",
    };
    from.jgId = this.value || "";
    from.bdzId = this.formData.BDZID;
    from.rows = JSON.stringify(this.tableSelect);
    from.bz = this.BZ;
    from.jcqk = this.jcqk;
    console.log(from);
    
    if (this.formData.JCRID && this.formData.JCRID.length > 0) {
      var names = "";
      console.log(this.formData.JCRID);

      this.formData.JCRID.map((it, index) => {
        var item = this.initTextData.jcjlr.filter((o) => o.code === it)[0];
        names += item.name + ",";
      });
      names = names.substr(0, names.length - 1);
      this.formData.JCRMC = names;
    } else {
      this.formData.JCRMC = "";
    }
    if (this.formData.DJRID) {
      var item2 = this.initTextData.jcjlr.filter(
        (o) => o.code === this.formData.DJRID
      )[0];
      this.formData.DJRMC = item2.name;
      this.formData.DJBZMC = item2.whbzMc;
      this.formData.DJBZID = item2.whbz;
    } else {
      this.formData.DJRMC = "";
      this.formData.DJBZMC = "";
    }
    this.formData.SSDWID = this.initTextData.SSDWID || "";
    this.formData.SSDWMC = this.initTextData.SSDWMC || "";
    from.topMsg = JSON.stringify(this.formData);
    if (this.f) {
      from.scrz = 1;
    } else {
      from.scrz = 0;
    }
    console.log(this.formData);

    (this as any).$services
      .getBlqBottom({
        data: from,
        method: "post",
        // ,postparams:true
      })
      .then((result: any) => {
        console.log(result);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: `${result.message}`,
          });
        } else {
          this.$message({
            type: "warning",
            message: `${result.message}`,
          });
        }
        this.$emit("handleClose");
      })
      .catch((err: object) => {
        this.$message({
          type: "warning",
          message: `操作失败`,
        });
        console.log(err);
      });
  }
  Close() {
    this.$emit("handleClose");
  }

  mounted() {
    this.initText();
  }
}
</script>

<style lang="scss" scoped>
.record {
  width: 100%;
  height: 5.5rem;
  .record-top {
    width: 100%;
    height: 275px;
    .text {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      margin-bottom: 0.1rem;
      > div:nth-child(2) {
        width: 120px;
        margin: 0 0.1rem;
      }
    }
    .colorh {
      color: rgba(255, 255, 255, 0.8);
    }
  }
  .record-in {
    width: 100%;
    height: calc(100% - 325px);
  }
  .record-bottom {
    width: 100%;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .scrz {
      position: absolute;
      left: 0;
      top: 0;
      line-height: 50px;
    }
  }
  // .paged {
  //   height: 0.6rem;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // }
}
</style>

